jQuery - Events and Fades

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

event.stopPropagation()

We can call event.stopPropagation to stop event propagation to an element’s parent and ancestor selectors.

For example, if we have:

<p>paragraph</p>

We can write:

$("p").click(function(event) {
  event.stopPropagation();
  // Do something
});

to stop the click event’s propagation.

event.target

We can get the element that an event is triggered on with the event.target property.

For example, if we have:

<p>paragraph</p>

Then we can get which element is clicked in the body by writing:

$("body").click(function(event) {
  console.log("clicked: ", event.target.nodeName);
});

The nodeName gets the tag name of the element that’s clicked.

event.timeStamp

We can get when the event is triggered with the timestamp property.

For example, if we have:

<p>paragraph</p>

Then we can write:

$("body").click(function(event) {
  console.log(event.timeStamp);
});

Then when we click on the paragraph, we see the timestamp logged.

event.type

The event.type property lets us get the type of event that’s triggered.

For example, if we have:

<p>paragraph</p>

Then we can write:

$("p").click(function(event) {
  alert(event.type);
});

to get the type of event that’s triggered with event.type .

event.which

The event.which property lets us get the key on the keyboard or mouse that’s pressed.

For example, if we have:

<input id="whichkey" value="type something">

Then we can get the key code of the keyboard key that’s pressed by writing:

$("#whichkey").on("keydown", function(event) {
  console.log(event.type, event.which);
});

which returns a number that corresponds to the key.

.fadeIn()

The .fadeIn() method fades an item to opaque.

For example, if we have the following HTML:

<div id="clickme">
  Click here
</div>
<img id="fork" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c">

and CSS:

#book {
  display: none;
}

We can make the photo appear slowly when we click on Click here by writing:

$("#clickme").click(function() {
  $("#fork").fadeIn("slow");
});

.fadeOut()

The .fadeOut() method lets us make an element disappear.

For example, if we have:

<div id="clickme">
  Click here
</div>
<img id="fork" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c">

Then we can make the photo fade out when we click on Click here by writing:

$("#clickme").click(function() {
  $("#fork").fadeOut("slow");
});

.fadeTo()

The .fadeTo() method lets us set the opacity to fade to.

For example, we can write:

<div id="clickme">
  Click here
</div>
<img id="fork" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c">

Then we can write:

$("#clickme").click(function() {
  $("#fork").fadeTo("slow", 0.5);
});

The 2nd argument is the opacity to fade to.

.fadeToggle()

The .fadeToggle() lets us display or hide the matched elements by animating their opacity.

For example, if we have:

<button>fadeToggle 1</button>
<button>fadeToggle 2</button>
<img id="fork" src="https://i.picsum.photos/id/23/200/200.jpg?hmac=IMR2f77CBqpauCb5W6kGzhwbKatX_r9IvgWj6n7FQ7c">

Then we can call the fadeToggle method by writing:

$("button").click(function() {
  $("#fork").first().fadeToggle("slow", "linear");
});

$("button").last().click(function() {
  $("#fork").first().fadeToggle("fast", "linear");
});

We add click listeners for the buttons so that we can call fadeToggle inside to toggle the fading when we click the buttons.

Conclusion

We can fade elements and manipulate events with jQuery.